import { observer } from "mobx-react";
import { toJS } from 'mobx';
import { Row, Col, Radio } from 'antd';
import { isArray } from 'lodash';
import { WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaBrowser, WeaCheckbox ,WeaLocaleProvider,WeaInputNumber} from 'ecCom';
import { TaskViewPageType } from "../../../constants/task";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class NodeForm extends React.Component {
    render() {
        const { store } = this.props;
        const { nodeForm } = store;
        return nodeForm.isInit ? (
            <div className="edc-node-form">
                <WeaSearchGroup
                    title={getLabel('502654', '基本信息')}
                    showGroup={true}
                >
                    {this.getBaseInfo()}
                </WeaSearchGroup>
                <div className="toggle" onClick={store.hideNodeForm}></div>
            </div>
        ) : (
                <div style={{ fontSize: 16, paddingTop: 100, textAlign: 'center', color: '#ccc' }} >
                    {getLabel('502655', '未选择节点')}
                </div>
            )
    }
    getBaseInfo = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        return [this.getNameInfo(),
        this.getHrefLinkInfo(),
        this.getResourceInfo(),
        this.getReportTime(),
        this.getAutoSaveType(),
        nodeForm.saveTimeTypeVisible &&  this.getAutoSaveTime(),
        //nodeForm.reportTypeVisible && this.getReportType(),
        this.getReportType(),
        //nodeForm.parentid != "" && nodeForm.parentid != "0" && this.getUndoType(),
        this.getUndoType(),
        this.getOperateMenu(),
        
        this.getFieldPropMenu(),
        this.getSynchronizeType(),
        ]
    }
    getUndoType = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value = '0', onChange } = nodeForm.bind('undoType');
        const change = (e) => {
            onChange(e.target.value);
        }
        return (
            <WeaFormItem
                label={label}
                labelCol={{ span: `${labelCol}` }}
                wrapperCol={{ span: `${fieldCol}` }}>
                <Radio.Group onChange={change} value={value} disabled={readonly}>
                    <Radio.Button value="0">{getLabel('502656', '禁止')}</Radio.Button>
                    <Radio.Button value="2">{getLabel('506821', '提交前')}</Radio.Button>
                    <Radio.Button value="1">{getLabel('506822', '查看前')}</Radio.Button>
                </Radio.Group>
            </WeaFormItem>
        )
    }
    getReportType = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value = '1', onChange } = nodeForm.bind('reportType');
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaCheckbox
                value={value}
                display="switch"
                onChange={onChange}
                viewAttr={readonly ? 1 : 2}
            />
        </WeaFormItem>)
    }

    getAutoSaveType = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value = '0', onChange } = nodeForm.bind('autoSaveType');
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaCheckbox
                value={value}
                display="switch"
                onChange={onChange}
                viewAttr={readonly ? 1 : 2}
            />
        </WeaFormItem>)
    }

    getAutoSaveTime = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value = '1', onChange } = nodeForm.bind('saveTime');
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaInputNumber value={Math.max(1,value) } onChange={onChange} min={1} style={{ width: 60, marginRight: 10 }} viewAttr={readonly ? 1 : 2}></WeaInputNumber>
            <WeaSelect
                //style={{ width: 50, display: 'inline-block' }}
                className="saveTime"
                options={[{ key: "0", showname: '分' }, { key: "1", showname: getLabel('502659','时') }]}
                value={nodeForm.saveTimeType || '0'}
                onChange={nodeForm.change.bind(nodeForm, 'saveTimeType')}
                viewAttr={readonly ? 1 : 2}
            />
        </WeaFormItem>)
    }

    getReportTime = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value, onChange } = nodeForm.bind('reportTime');
        if (readonly) {
            return (
                <WeaFormItem
                    label={`${label}`}
                    labelCol={{ span: `${labelCol}` }}
                    wrapperCol={{ span: `${fieldCol}` }}>
                    <WeaInput value={`${value}${{ "0": getLabel('502659', '时'), "1": getLabel('502660', '天'), "2": getLabel('502661', '月') }[nodeForm.reportTimeType]}`} viewAttr={1} />
                </WeaFormItem>
            )
        }
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaInputNumber value={value} onChange={onChange} min={0} style={{ width: 60, marginRight: 10 }}></WeaInputNumber>
            <WeaSelect
                //style={{ width: 50, display: 'inline-block' }}
                className="reporttime"
                options={[{ key: "0", showname: getLabel('502659', '时') }, { key: "1", showname: getLabel('502660', '天') }, { key: "2", showname: getLabel('502661', '月') }]}
                value={nodeForm.reportTimeType}
                onChange={nodeForm.change.bind(nodeForm, 'reportTimeType')}
            />
        </WeaFormItem>)
    }
    getNameInfo = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, value, onChange } = nodeForm.bind('name');
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaInput value={value} onChange={onChange} viewAttr={readonly ? 1 : 3}></WeaInput>
        </WeaFormItem>)
    }
    getResourceInfo = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol, valueObj, onChange } = nodeForm.bind('resourceid', 'resourceObj');
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaBrowser
                type={17}
                isSingle={false}
                replaceDatas={toJS(valueObj)}
                onChange={onChange}
                viewAttr={readonly ? 1 : 3}
                icon="icon-coms02-Data-center"
                iconBgcolor="#1a57a0"
                title={getLabel('502662', '选择操作者')} 
            />
        </WeaFormItem>)
    }
    getHrefLinkInfo = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const bindObj = nodeForm.bind('hreflinkObj');
        const { label, labelCol, fieldCol, onChange, options, options1 } = bindObj;
        let { value } = bindObj;
        if (!value || !isArray(toJS(value))) {
            value = [TaskViewPageType.CUSTOM, '', ''];
        }
        const [pageType, pageUrl, pageId] = value || [];
        if (readonly) {
            const [{ showname: typeName } = { typeName: getLabel(502465, '自定义') }] = options.filter(d => d.key === pageType);
            const readvalue = `${typeName}：${pageType === TaskViewPageType.CUSTOM ? pageUrl : pageType === TaskViewPageType.EXCEL ?
                (options1.filter(d => d.key === pageId)[0] || {}).showname
                : ""}`;
            return (
                <WeaFormItem
                    label={`${label}`}
                    labelCol={{ span: `${labelCol}` }}
                    wrapperCol={{ span: `${fieldCol}` }}>
                    <WeaInput value={readvalue} viewAttr={1} />
                </WeaFormItem>
            )
        }
        const changePageType = (value) => {
            onChange([value, pageUrl, pageId]);
        }
        const changePageId = (value) => {
            onChange([pageType, pageUrl, value]);
        }
        const changePageUrl = (value) => {
            onChange([pageType, value, pageId]);
        }

        return (
            <WeaFormItem
                label={`${label}`}
                labelCol={{ span: `${labelCol}` }}
                wrapperCol={{ span: `${fieldCol}` }}>
                <Row gutter={10}>
                    <Col span={8}>
                        <WeaSelect
                            options={options}
                            value={pageType}
                            onChange={changePageType}
                            viewAttr={readonly ? 1 : 3}
                        />
                    </Col>
                    <Col span={16}>
                        {pageType === TaskViewPageType.EXCEL && <WeaSelect options={options1} value={pageId} onChange={changePageId} ></WeaSelect>}
                        {pageType === TaskViewPageType.CUSTOM && <WeaInput value={pageUrl} onChange={changePageUrl} ></WeaInput>}
                    </Col>
                </Row>

            </WeaFormItem>
        )
    }

    getSynchronizeType = () => {
        const { store } = this.props;
        const { nodeForm, readonly } = store;
        const { label, labelCol, fieldCol } = nodeForm.bind('synchronizeType');
        const { valueObj } = nodeForm.bind('synchronizeNodeId', 'synchronizeNodeObj');
        const dataParams = {pathid:store.path.id,nodeid:nodeForm.id};
        return (<WeaFormItem
            label={`${label}`}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <Row gutter={10}>
                <Col span={12}>
                    <WeaSelect
                        options={[{ key: "0", showname: '不同步' }, { key: "1", showname: '同步到下级节点' }, { key: "2", showname: '同步到指定节点' }]}
                        value={nodeForm.synchronizeType || "0"}
                        onChange={nodeForm.change.bind(nodeForm, 'synchronizeType')}
                        viewAttr={readonly ? 1 : 3}
                    />
                </Col>
                <Col span={12}>
                     { nodeForm.synchronizeType === '2' && 
                        <WeaBrowser 
                            icon={"icon-coms02-Data-center"}
                            title={getLabel('32206', '选择节点')}
                            type='edcAppPathNode' 
                            isSingle={false} 
                            dataParams={dataParams}
                            completeParams={dataParams}
                            destDataParams={dataParams}
                            maxBrowerHeight={100}
                            onChange={nodeForm.change.bind(nodeForm, 'synchronizeNodeId')}
                            replaceDatas={toJS(valueObj)}
                            viewAttr={readonly ? 1 : 3}
                        />
                     }
                </Col>
            </Row>
        </WeaFormItem>)
    }

    getOperateMenu = () => {
        return (
           <WeaFormItem
                label={getLabel('16380', '操作菜单')}
                labelCol={{ span: '6' }}
                wrapperCol={{ span: '18' }}
                >
               {/* <span className="edcNodeSet-operate" onClick={this.openOperateMenu}>
                   <i className="icon-coms-Flow-setting edcNodeSet-icon"/>
               </span> */}

                <i className="icon-coms-Flow-setting edcNodeSet-icon edcNodeSet-operate" onClick={this.openOperateMenu}/>
           </WeaFormItem>
        )
    }

    getFieldPropMenu = () => {
        return (
           <WeaFormItem
                label={'字段属性'}
                labelCol={{ span: '6' }}
                wrapperCol={{ span: '18' }}
                >
               {/* <span className="edcNodeSet-operate" onClick={this.openOperateMenu}>
                   <i className="icon-coms-Flow-setting edcNodeSet-icon"/>
               </span> */}

                <i className="icon-coms-Flow-setting edcNodeSet-icon edcNodeSet-operate" onClick={this.openFieldPropMenu}/>
           </WeaFormItem>
        )
    }

    openOperateMenu = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        store.operateMenuDialogStore.open({nodeid:nodeForm.id})
    }

    openFieldPropMenu = () => {
        const { store } = this.props;
        console.log(store)
        const { nodeForm } = store;
        store.fieldPropDialogStore.open({appid:store.params.appid,nodeid:nodeForm.id})
    }
}